Início da configuração do projeto, começando pelo Next.js.
O Readme também foi atualizado informando as tecnologias que serão utilizadas.

Jest e suas configurações foram adicionadas.
.gitignore foi atualizado para lidar com as novidades.

styled-components adicionado junto de um componente com caráter de teste.

Configurações do ESLint recomendadas pelo Next.js adicionadas.
Configuração do Prettier adicionada.
Integração do ESLint com o Prettier para evitar conflitos.
Prettier configurado para buscar as configurações do Editor Config e incorporá-las automaticamente as suas regras.

Ao usar o SWC para rodar o ESLint, o style-components precisa da configuração adicionada para funcionar corretamente.
Mais informações: https://stackoverflow.com/a/70429669/4879533

O Spinner é um componente para indicar o carregamento de dados de uma fonte assíncrona.
Adicionado no carregamento inicial enquanto aguarda retorno da API sobre as cartas.
Através da prop loadingProblem, informa se o carregamento está sendo feito ou se houve algum problema.
Os testes relacionados foram adicionados.
React Spinners e React Transition Group foram adicionados como novas dependências.

CardManager é o componente responsável por organizar as cartas vindas da API, gerenciar o estado do jogo e criar os componentes Cards.
Card é o componente responsável por cada carta individualmente, armazenando suas informações, estados e transições entre animações.
Testes foram adicionados e ajustados.

O componente CardExpanded cria um modal e um overlay para quando uma carta for selecionada.
Como a lista de cartas geradas pode gerar scrollbar no body, o componente GlobalStyle foi criado.
Ele é um Context Provider que altera a estilização do body dinamicamente.
O GlobalStyle provê uma função para o modal alterar o overflow do body dependendo do seu estado.

Para auxiliar nos testes, a função de Shuffle foi movida para o módulo de utils.
Com objetivo de evitar testes muito parecidos ou repetidos entre componentes e seu uso nas páginas,
adotei o uso de snapshots para as páginas e as afirmações para os componentes.

Criando o arquivo de configuração do GitHub Actions para o projeto.

O Prettier quebrou a identação do arquivo e consequentemente o funcionamento do CI.
Identação do arquivo foi ajustada.
Agora o arquivo é ignorado pelo Prettier.

O arquivo possuia alguns erros.
O mesmo foi verificado e ajustado com base no checker https://rhysd.github.io/actionlint/.

Adicionado o processo de criar o arquivo .env antes de rodar os testes.

A página Home possuia um import de fonte em um dos styled-components, causando problemas de build.
Como solução, tudo relacionado a setup de fonte foi substituido pelo pacote oficial do Next.
A fonte agora é injetada através do _app.js.

Os snapshots dos componentes foram atualizados para lidar com a mudança.

Link para a versão de produção do projeto adicionado.

Remoção do pacote CSSTransition.
Novo setup com o controle da animação através de estados, similar ao componente cards.
Os testes e snapshots foram atualizados para condizer com as alterações.

Ajuste nas regras do ESLint, para que um Warning fosse removido devido ao uso do useEffect nos componentes de animação.

Atualização nas minhas anotações.
Agora informa que é necessário criar um arquivo .env caso queira iniciar o projeto em desenvolvimento.

Com todas as features funcionando, fiz uma atualização visual geral nos componentes.
Foi adicionando um novo componente como botão principal do projeto.
Os testes e snapshots foram atualizados para refletir as novas mudanças.

Ao criar o modal junto da lista de cartas dentro do flexbox estava fazendo com que a listagem
se reorganizasse com um elemento vazio. Para resolver o problema, criei um HOC que caso encontre
o elemento main na document, irá apendá-lo lá e não mais na lista.

Como o Next.js por default cria um elemento main onde os estilos globais são aplicados,
o componente busca por ele. Caso não encontre, não é renderizado nada.

Para os testes, sua representação por snapshot facilita e muito no entendimento e criação de testes,
por isso foi usado para este componente.